"use client"

interface TagListProps {
  tags: string[]
  selectedTag?: string
  onTagClick?: (tag: string) => void
  className?: string
}

export function TagList({ tags, selectedTag, onTagClick, className = "" }: TagListProps) {
  return (
    <div className={`flex flex-wrap gap-2 ${className}`}>
      {tags.map((tag) => (
        <button
          key={tag}
          onClick={() => onTagClick?.(tag)}
          className={`px-3 py-1 text-sm rounded-full border transition-colors ${
            selectedTag === tag
              ? "bg-cyan-800 text-white border-cyan-800"
              : "bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:hover:bg-gray-700"
          }`}
        >
          {tag}
        </button>
      ))}
    </div>
  )
}
